<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="../css/bootstrap.css" />
    <title>Font Awesome 图标</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
    />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css"
    />
  </head>

  <body>
    <div class="fa-3x">
      <i class="fas fa-battery-half"></i>
      <i class="fas fa-coffee"></i>
      <i class="fas fa-car"></i>
      <i class="fas fa-baby"></i>
      <i class="fas fa-spinner fa-spin"></i>
      <i class="fas fa-circle-notch fa-spin"></i>
      <i class="fas fa-sync fa-spin"></i>
      <i class="fas fa-cog fa-spin"></i>
      <i class="fas fa-spinner fa-pulse"></i>
      <i class="fas fa-stroopwafel fa-spin"></i>
    </div>
    <button class="btn btn-success"><i class="bi-alarm"></i> 闹钟</button>
    <button class="btn btn-info"><i class="bi-volume-mute"></i> 静音</button>
    <button class="btn btn-primary">
      <i class="bi bi-airplane-fill"></i>飞机
    </button>
    <hr />
    <!-- 图标应用到导航栏 -->
    <nav class="nav nav-tabs">
      <a href="#" class="nav-item nav-link active">
        <i class="fa fa-home"></i>home
      </a>
      <a href="#" class="nav-item nav-link"> <i class="fa fa-car"></i>car </a>
    </nav>
    <hr>
    <!-- 自定义图标大小 -->
    <button type="button" class="btn btn-primary btn-lg">
        <span class="fa fa-search"></span><br>
        <span>搜索</span>
    </button>
    <!-- 调整父容器的字体大小就可以控制图标的大小 -->
    <button type="button" class="btn btn-primary btn-lg" style="font-size: 60px;">
        <span class="fa fa-search"></span>
        <span>搜索</span>
    </button>
    <!-- 调整父容器的字体颜色就可以控制图标的颜色 -->
    <button type="button" class="btn btn-primary btn-lg" style="color: red;">
        <span class="fa fa-search"></span>
        <span>搜索</span>
    </button>
    <hr>
    <!-- 使用svg方式引入图标 -->
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-xbox" viewBox="0 0 16 16">
        <path d="M7.202 15.967a7.987 7.987 0 0 1-3.552-1.26c-.898-.585-1.101-.826-1.101-1.306 0-.965 1.062-2.656 2.879-4.583C6.459 7.723 7.897 6.44 8.052 6.475c.302.068 2.718 2.423 3.622 3.531 1.43 1.753 2.088 3.189 1.754 3.829-.254.486-1.83 1.437-2.987 1.802-.954.301-2.207.429-3.239.33Zm-5.866-3.57C.589 11.253.212 10.127.03 8.497c-.06-.539-.038-.846.137-1.95.218-1.377 1.002-2.97 1.945-3.95.401-.417.437-.427.926-.263.595.2 1.23.638 2.213 1.528l.574.519-.313.385C4.056 6.553 2.52 9.086 1.94 10.653c-.315.852-.442 1.707-.306 2.063.091.24.007.15-.3-.319Zm13.101.195c.074-.36-.019-1.02-.238-1.687-.473-1.443-2.055-4.128-3.508-5.953l-.457-.575.494-.454c.646-.593 1.095-.948 1.58-1.25.381-.237.927-.448 1.161-.448.145 0 .654.528 1.065 1.104a8.372 8.372 0 0 1 1.343 3.102c.153.728.166 2.286.024 3.012a9.495 9.495 0 0 1-.6 1.893c-.179.393-.624 1.156-.82 1.404-.1.128-.1.127-.043-.148ZM7.335 1.952c-.67-.34-1.704-.705-2.276-.803a4.171 4.171 0 0 0-.759-.043c-.471.024-.45 0 .306-.358A7.778 7.778 0 0 1 6.47.128c.8-.169 2.306-.17 3.094-.005.85.18 1.853.552 2.418.9l.168.103-.385-.02c-.766-.038-1.88.27-3.078.853-.361.176-.676.316-.699.312a12.246 12.246 0 0 1-.654-.319Z"/>
      </svg>
      <img src="../images/油卡充值.svg" alt="">
  </body>
</html>
